<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" type="text/css" href="./css/style.min.css">
    <title>退货退款</title>
</head>
<script type="text/javascript">
    window.onload=function () {
            document.addEventListener('touchstart',function (event) {
                if(event.touches.length>1){
                    event.preventDefault();
                }
            })
            var lastTouchEnd=0;
            document.addEventListener('touchend',function (event) {
                var now=(new Date()).getTime();
                if(now-lastTouchEnd<=300){
                    event.preventDefault();
                }
                lastTouchEnd=now;
            },false)
        }
</script>

<body>
    <div id="personal_center">
        <div class="t-container">
            <header class="cl" v-show="header.show">
                <div class="nav-bar cl">
                    <span class="goback arrow_l" @click="goback"></span>
                    <span class="page-name" v-cloak>{{shop_name}}会员店</span>
                </div>
            </header>
            <div class="t-main">
                <div class="t-whole-main t-order-details-main">
                    <div class="t-whole-goods-item t-return-goods-item t-rg">
                        <div class="t-whole-header">
                            <p>售后类型</p>
                            <!-- <span>待卖家付款</span> -->
                        </div>
                        <div class="t-input-group" v-if="this.status == 30">
                            <input type="radio" id="return" name="return" style="display: none;">
                            <label for="return" class="t-input-lable" @click="checkedLabel(0)">
	                 	     <i :class="{active:isActive }"><em></em></i>我要退货</label>
                        </div>
                        <div class="t-input-group">
                            <input type="radio" id="return_no" name="return" style="display: none;">
                            <label for="return_no" class="t-input-lable" @click="checkedLabel(1)">
	                 	     <i :class="{active:!isActive }"><em></em></i>我要退款<span>(无需退货)</span></label>
                        </div>
                    </div>
                    <div class="t-gap-box2"></div>
                    <div class="t-whole-goods-item t-return-goods-item t-rg" v-show="!isActive">
                        <div class="t-input-group">
                            <input type="radio" id="arrive" name="goodsStaus" style="display: none;">
                            <label for="arrive" class="t-input-lable" @click="checkedLabel(2)">
	                 	<i :class="{active:isActive1 }"><em></em></i>已到收货</label>
                        </div>
                        <div class="t-input-group">
                            <input type="radio" id="not_arrived" name="goodsStaus" style="display: none;">
                            <label for="not_arrived" class="t-input-lable" @click="checkedLabel(3)">
	                 	<i :class="{active:!isActive1 }"><em></em></i>未到收货</label>
                        </div>
                    </div>
                    <div class="t-gap-box2"></div>
                    <div class="t-whole-goods-item t-return-goods-item t-rg">
                        <div class="t-whole-header">
                            <p>退款原因</p>
                        </div>
                        <div class="t-input-group"  v-cloak>
                            <select class="t-input-select" v-model="selected">
							<option v-bind:value="option.value" v-for="option in options" v-cloak>{{option.text}}</option>
	                 	</select>
                        </div>

                    </div>
                    <div class="t-gap-box2"></div>
                    <div class="t-whole-goods-item t-return-goods-item t-rg">
                        <div class="t-whole-header">
                            <p>退款金额</p>
                        </div>
                        <div class="t-input-group return-money-group">
                            <input type="text" placeholder="请输入金额" class="am-input" v-model="refundAmount">

                            <span class="amount-of-money" v-cloak>订单总共：￥{{total}}</span>
                        </div>

                    </div>
                    <div class="t-gap-box2"></div>
                    <div class="t-whole-goods-item t-return-goods-item t-rg">
                        <div class="t-whole-header">
                            <p>退款说明</p>
                        </div>
                        <div class="t-input-group">
                            <textarea placeholder="请说明备注" class="refund-d-text" v-model="reContent"></textarea>
                        </div>

                    </div>
                    <div class="t-gap-box2"></div>
                    <div class="t-whole-goods-item t-return-goods-item t-rg">
                        <div class="t-whole-header">
                            <p>上传图片</p>
                            <!-- <span>待卖家付款</span> -->
                        </div>
                        <div>
                            <div class="rg-file">
                                <ul>
                                    <li v-for="(item,index) in imgUrl" :key="index">
                                        <a href="javascript:void(0)">
                                            <form actio="http://jdhdev2.jdhui.com/jdh_files/file/uploadImg?windowname=1" method="post" encType="multipart/form-data">
                                                <input type="hidden" name="rootPath" value="member">
                                                <input type="file" name="file" value="" class="smodify-file" @change="uploadImg($event,index)">
                                            </form>
                                            <span>+</span>
                                            <img :src="item" alt="" class="up-img">
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
        <div class="t-footer return-footer">
            <button class="form-btn" @click="returnGoods">提交</button>
        </div>
        <toast ref="toast"></toast>
        <confirm ref="confirm"></confirm>
    </div>
    <script src="./js/lib/vue.js"></script>
    <script src="http://static.jdhui.com/lib/vue-resource/1.2/vue-resource.js"></script>
    <script src="./js/min/config.min.js"></script>
    <script src="./js/min/common.min.js"></script>
    <script src="./js/min/component.min.js"></script>

    <script>
        var toast = component.popup.toast(),
            confirm = component.popup.confirm({
                name: 'confirm',
                type: 'confirm'
            });
        var app = new Vue({
            el: '#personal_center',
            data: {
                header: {
                    show: !APP.iswechat()
                },
                isActive: true,
                isActive1: true,
                selected: '1',
                options: [{
                    text: '退运费',
                    value: '1'
                }, {
                    text: '商品瑕疵',
                    value: '2'
                }, {
                    text: '质量问题',
                    value: '3'
                }, {
                    text: '颜色/尺寸/参数不符',
                    value: '4'
                }, {
                    text: '少件/漏发',
                    value: '5'
                }, {
                    text: '收到商品时候有划痕/破损',
                    value: '6'
                }, {
                    text: '假冒品牌',
                    value: '7'
                }, {
                    text: '发票问题',
                    value: '8'
                }, {
                    text: '其他',
                    value: '99'
                }],
                type: '1',
                isRecevied: '1',
                refundAmount: '',
                refundReason: '',
                reContent: '',
                imgUrl: ['', '', '', ''],

                store_id: APP.getQueryString('storeid'),
                status: APP.getQueryString('status'),
                total: Number(APP.getQueryString('total')).toFixed(2),
                id: APP.getQueryString('id'),
                isedit: APP.getQueryString('isedit'),
                rid: APP.getQueryString('rid'),
                shop_name: ''
            },
            mounted: function() {
                APP.init(this, function() {
                    this.shop_name = APP.getCookie('shopname');
                }, function(arg) {
                    this.shop_name = arg.body.data.shop.shop_name;
                });
                //如果是修改退款
                if (this.isedit == 1) {
                    Vue.http.get(APIJAVA + 'c/mobie/refund/getInfo?shopId=' + this.store_id + "&id=" + this.rid, {}, {
                        emulateJSON: true
                    }).then(function(_res) {
                        var _re = _res.body;
                        this.total = _re.order.totalAmount;
                        this.refundAmount = _re.refund.refundAmount;
                        this.reContent = _re.refund.refundNote;
                        this.status = _re.order.status;
                        _re.uimg1 && this.$set(this.imgUrl, 0, _re.uimg1);
                        _re.uimg2 && this.$set(this.imgUrl, 1, _re.uimg2);
                        _re.uimg3 && this.$set(this.imgUrl, 2, _re.uimg3);
                        _re.uimg4 && this.$set(this.imgUrl, 3, _re.uimg4);
                        this.selected = _re.refund.refundReason;

                        if (_re.refund.type == 1) {
                            this.isActive = false;
                            this.type = '1';
                        } else {
                            this.isActive = true;
                            this.type = '2';
                        }

                        if (_re.refund.isRecevied == 1) {
                            this.isActive1 = true;
                            this.isRecevied = '1';
                        } else {
                            this.isActive1 = false;
                            this.isRecevied = '2';
                        }
                    }.bind(this));
                } else {
                    //默认选择退款类型
                    if (this.status == 30) {
                        this.isActive = true;
                        this.type = '2';
                    } else {
                        this.isActive = false;
                        this.type = '1';
                    }
                }
            },
            components: {
                'toast': toast,
                'confirm': confirm
            },
            methods: {
                goback: function() {
                    window.history.go(-1);
                },
                checkedLabel: function(num) {
                    if (num == 0) {
                        this.isActive = true;
                        this.type = '2';
                    }
                    if (num == 1) {
                        this.isActive = false;
                        this.type = '1';
                    }
                    if (num == 2) {
                        this.isActive1 = true;
                        this.isRecevied = '1';
                    }
                    if (num == 3) {
                        this.isActive1 = false;
                        this.isRecevied = '2';
                    }
                },
                returnGoods: function() {
                    var reg =/^([1-9]\d*|0)(\.\d{1,2})?$/;
                    if (this.refundAmount == '') {
                        this.$refs.toast.show('请填写退款金额');
                        return;
                    } else if (isNaN(this.refundAmount)) {
                        this.$refs.toast.show('请填写正确的退款金额');
                        return;
                    } else if (parseFloat(this.refundAmount) > parseFloat(this.total)) {
                        this.$refs.toast.show('退款金额大于零或小于订单总额且小数位数不超过2位');
                        return;
                    }
                    else if(!reg.test(this.refundAmount)){
                        this.$refs.toast.show('退款金额大于零或小于订单总额且小数位数不超过2位');
                        return;
                    }
					var reason_val = '';
					for(var item in this.options) {
						
					}
                    if (this.isedit == 1) {
                        Vue.http.post(APIJAVA + 'c/mobie/refund/updateRefundInfo', {
                            shopId: this.store_id,
                            id: this.rid,
                            type: this.type,
                            isRecevied: this.isRecevied,
                            refundAmount: this.refundAmount,
                            refundReason: this.selected,
                            refundNote: this.reContent,
                            img1: this.imgUrl[0],
                            img2: this.imgUrl[1],
                            img3: this.imgUrl[2],
                            img4: this.imgUrl[3]
                        }, {
                            emulateJSON: true
                        }).then(function(_res) {
                            console.log(_res);
                            if (_res.body.code == 1) {
                                window.location.href = 'return-goods-details.html?storeid=' + this.store_id + '&rid=' + this.rid + '&oid=' + this.id;
                            } else {
                                this.$refs.toast.show(_res.body.message);
                            }
                        }.bind(this))
                    } else {
                        Vue.http.post(APIJAVA + 'c/mobie/refund/apply', {
                            shopId: this.store_id,
                            orderId: this.id,
                            type: this.type,
                            isRecevied: this.isRecevied,
                            refundAmount: this.refundAmount,
                            refundReason: this.selected,
                            refundNote: this.reContent,
                            img1: this.imgUrl[0],
                            img2: this.imgUrl[1],
                            img3: this.imgUrl[2],
                            img4: this.imgUrl[3]
                        }, {
                            emulateJSON: true
                        }).then(function(_res) {
                            if (_res.body.code == 1) {
                                window.location.href = 'return-goods-details.html?storeid=' + this.store_id + '&rid=' + _res.body.obj.id + '&oid=' + this.id;
                            } else {
                                this.$refs.toast.show(_res.body.message);
                            }
                        }.bind(this))
                    }

                },
                uploadImg: function(e, index) {
                    Vue.http.post(APIUploadImg + 'file/uploadImg', new FormData(e.target.parentNode), {
                        credentials: false
                    }).then(function(_res) {
                        var _imgurl = JDHIMG + _res.body.source;
                        this.$set(this.imgUrl, index, _imgurl);
                    }.bind(this));
                }
            }
        })
    </script>
</body>

</html>